<template>
    <div class="risk-tabs-wrap">
        <el-tabs type="card" v-model="selectedTab" @tab-remove="removeTab">
            <el-tab-pane name="tableView" :closable="false">
                <span slot="label">
                    <i class="el-icon-tickets"></i>
                    基础信息
                </span>
                <slot>
                    <RangeIndicatorsTable style="height: calc(100vh - 60px)" />
                </slot>
            </el-tab-pane>
            <el-tab-pane :label="tabItem.name" :name="tabItem.name" closable v-for="tabItem in tabs" :key="tabItem.name">
                <slot>
                    <template v-if="tabItem.type === 'look'">
                        <RangeIndicatorsInfo :operateType="tabItem.type" :code="tabItem.code" :key="tabItem.name" />
                    </template>
                    <template v-else-if="tabItem.type === 'edit'">
                        <RangeIndicatorsInfo :operateType="tabItem.type" :code="tabItem.code" :key="tabItem.name" />
                    </template>
                    <template v-else>
                        <RangeIndicatorsInfo :operateType="tabItem.type" :code="tabItem.code" :key="tabItem.name" />
                    </template>
                </slot>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import RangeIndicatorsTable from '@/pages/quota/range-indicators/range-indicators-table.vue';
import RangeIndicatorsInfo from '@/pages/quota/range-indicators/range-indicators-info.vue';

@Component({ name: 'RangeIndicators', components: { RangeIndicatorsTable, RangeIndicatorsInfo } })
export default class RangeIndicators extends mixins(RiskEmitter) {
    created() {
        this.$on('handleTags', this.handleTags);
    }
    // 页标值
    private selectedTab = 'tableView';
    // private selectedTab = '编辑YH420';
    private tabs = [];
    // private tabs = [{ type: 'edit', name: '编辑YH420', code: 'YH420' }];

    // 处理tabs
    handleTags(data) {
        const tabs = this.tabs;
        if (data.type === 'add') {
            const item = tabs.find(item => item.name === '新增范围指标');
            if (!item) {
                this.tabs.push({
                    type: 'add',
                    name: '新增范围指标',
                    code: '',
                });
            }
            this.selectedTab = '新增范围指标';
        } else if (data.type === 'edit') {
            let tabData = {
                type: 'edit',
                name: '编辑' + data.code,
                code: data.code,
            };
            const item = tabs.find(item => item.name === tabData.name);
            if (!item) {
                this.tabs.push(tabData);
            }
            this.selectedTab = tabData.name;
        } else if (data.type === 'look') {
            let tabData = {
                type: 'look',
                name: '查看' + data.code,
                code: data.code,
            };
            const item = tabs.find(item => item.name === tabData.name);
            if (!item) {
                this.tabs.push(tabData);
            }
            this.selectedTab = tabData.name;
        } else if (data.type === 'delete') {
            this.removeTab(data.name);
        }
    }

    // 删除标签页
    removeTab(name) {
        this.tabs = this.tabs.filter(item => item.name !== name);
        this.selectedTab = 'tableView';
        this.broadcast('RangeIndicatorsTable', 'refreshPage', null);
    }
}
</script>

<style lang="scss" scoped>
.risk-tabs-wrap {
    padding-top: 10px;

    & /deep/ {
        .el-tabs .el-tabs__nav .el-tabs__item {
            line-height: 34px;
            padding-left: 15px;
            padding-right: 15px;
            border-right: 1px solid #e4e7ed;
        }

        .el-tabs .el-tabs__nav .el-tabs__item span {
            border-right: 0px solid #fff;
        }

        .el-tabs--card > .el-tabs__header .el-tabs__item .el-icon-close {
            width: 14px;
            // margin-right: 5px;
            // right: 6px;
        }

        .el-tab-pane {
            color: inherit;
        }
    }
}
</style>
